<template>
	<view class="content">
		<u-navbar class="head" :fixed="false" left-icon="" :autoBack="false" :safeAreaInsetTop="true"
			style="z-index: 99999999;position: relative;">
			<view slot="right">
				<m-capsule :closeHandler="CloseShopPage"></m-capsule>
			</view>
		</u-navbar>

		<web-view ref="webview" v-if="isShow" fullscreen="false" class="uni-flex-item" :src="HtmlUrl">
		</web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				HtmlUrl: null,
				isShow: true,
			}
		},
		onLoad(option) {
			var that = this;
			console.log(option)

			if (!that.$utils.isEmpty(option)) {
				that.GetWebViewUrl(option.ID);
			}
		},
		onReady() {
			var that = this;
			let height = 0; //定义动态的高度变量
			let navbarHeight = 0;
			uni.getSystemInfo({ // 获取当前设备的具体信息
				success: (sysinfo) => {
					// 总盒子高度
					height = sysinfo.windowHeight;
					// 导航栏高度
					uni.createSelectorQuery().select('.head').boundingClientRect(data => {
						navbarHeight = data.height;
						height = height - data.height;
						let currentWebview = that.$scope.$getAppWebview().children()[0]; //获取当前web-view
						var wv = currentWebview;
						wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度，单位为px
							top: navbarHeight, //此处是距离顶部的高度，应该是你页面的头部
							height: height, //webview的高度
						})

					}).exec()

				}
			});
		},
		methods: {
			GetWebViewUrl(ID) { // 获取链接数据
				var that = this
				that.Request.request('selectCZSC_URL', {
					Type: ID
				}, function(ret) {
					if (ret.status == 200) {
						if (ret.data.ds[0].url) {
							that.isShow = true;
							that.HtmlUrl = ret.data.ds[0].url;
						}
					}
				});
			},
			CloseShopPage() { // 关闭
				var that = this;
				// console.log(this.OrderUrl)
				that.isShow = false;
				setTimeout(() => {

					uni.navigateBack()
				}, 50)
			},
		}
	}
</script>

<style lang="scss">
	* {
		background-color: transparent;
	}

	.content {
		// background-color: #51d0d0;
		display: flex;
		flex-direction: column;
		// align-items: center;
		// justify-content: center;
		/* 给顶部盒子安全高度 */
		// padding-top: var(--status-bar-height);

		.popup-container {
			z-index: 1001;
			/* 设置一个较高的z-index值 */
		}
	}
</style>